<template>
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="退款申请">
      <el-form ref="form" :model="formData" label-width="80px" :disabled="loading">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item prop="id" label="订单编号">
              <el-input v-model="formData.id" :readonly="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="createTime" label="申请时间">
              <el-input v-model="formData.createTime" :readonly="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="payType" label="支付方式">
              <el-input v-model="formData['goodOrderDO']['payType']" :readonly="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="payId" label="支付编号">
              <el-input v-model="formData['goodOrderDO']['payId']" :readonly="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="priceTime" label="支付时间">
              <el-input v-model="formData['goodOrderDO']['priceTime']" :readonly="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="price" label="退款金额">
              <el-input v-model="formData['goodOrderDO']['price']" :readonly="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="message" label="申请理由">
              <el-input v-model="formData.message" :readonly="true"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleRefund" :disabled="loading">退款</el-button>
      </span>
    </el-dialog>
</template>

<script>
import { queryOrderApplyByOrderId } from '@/api/ApiOrderApply'
import { ResultCode } from '@/constants/constants'
import { formatTime } from '@/utils/ConvertData'
import { refundByOrderId } from '@/api/ApiOrderDetail'

export default {
  name: 'OrderRefundDialog',
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    orderId: {
      required: true,
      type: [String, Number]
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      dialogVisible: false,
      formData: {
        id: 222,
        message: '不发货',
        createTime: '333',
        goodOrderDO: {}
      },
      queryLoading: false,
      submitLoading: false
    }
  },
  computed: {
    loading () {
      return this.queryLoading || this.submitLoading
    }
  },
  methods: {
    /**
     * 关闭对话框
     */
    closeDialog () {
      this.dialogVisible = false
    },
    /**
     * 退款
     */
    refund () {
      this.submitLoading = true
      refundByOrderId(this.orderId, data => {
        if (data && data.code === ResultCode.OK) {
          this.$message.success('退款成功')
          this.$emit('change')
          this.dialogVisible = false
        }
      }, () => {
        this.submitLoading = false
      })
    },
    /**
     * 退款
     */
    handleRefund () {
      this.$msgbox({
        title: '退款',
        message: '确定取款吗？',
        showCancelButton: true,
        confirmButtonText: '退款',
        cancelButtonText: '取消'
      }).then(action => {
        if (action === 'confirm') {
          this.$message.success('退款啦')
          this.refund()
        }
      })
    },
    /**
     * 转换数据
     */
    convertOrderApply (item) {
      item.createTime = formatTime(item['createTime'])
      if (item['goodOrderDO'] && item['goodOrderDO']['priceTime']) {
        item['goodOrderDO']['priceTime'] = formatTime(item['goodOrderDO']['priceTime'])
      }
      return item
    },
    /**
     * 更新数据
     */
    refreshData () {
      this.queryLoading = true
      queryOrderApplyByOrderId(this.orderId, data => {
        if (data && data.code === ResultCode.OK) {
          this.formData = this.convertOrderApply(data.object)
        }
      }, () => {
        this.queryLoading = false
      })
    }
  },
  watch: {
    dialogVisible (val) {
      this.$emit('visible', val)
    },
    visible (val) {
      if (this.dialogVisible !== val) {
        this.dialogVisible = val
      }
    },
    orderId () {
      this.refreshData()
    }
  }
}
</script>

<style scoped>

</style>
